<template>
<!-- 页面布局card通用组件 -->
<PageCard>
    <!-- 左侧树形 右侧表格 -->
    <TreeGridPage
    title="商品分类"
    ref="goodsCatalogTree"
    :datas="goodsCatalogList"
    :props="{ children: 'children', label: 'catalogName' }"
    @refresh="treeRefresh"
    @treeClick="treeClick">
      <!-- 头部工具栏 -->
      <div slot="toolBar">
        <ToolBar>
          <el-form :model="queryForm" label-width="100px">
            <el-row :gutter="24">
              <el-col :span="4">
                <el-form-item label="关键词:">
                  <el-input
                    v-model="queryForm.keyword"
                    placeholder="商品编号:名称"
                    style="100%;"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="商户:">
                  <el-select
                  v-model="queryForm.tenantId"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="名称:账号:手机号"
                  :remote-method="loadMerchantsInfo"
                  :loading="merchantsLoading">
                    <el-option
                    v-for="item in merchantsInfos"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="颜色:">
                  <el-input
                    v-model="queryForm.colorName"
                    placeholder="名称"
                    style="100%;"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="尺码:">
                  <el-input
                    v-model="queryForm.sizeName"
                    placeholder="名称"
                    style="100%;"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="单位:">
                  <el-input
                    v-model="queryForm.unitName"
                    placeholder="名称"
                    style="100%;"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4">
                <el-form-item label="审核状态:">
                  <el-select
                  v-model="queryForm.auditStatus"
                  placeholder="请选择"
                  clearable
                  style="width: 100%;">
                    <el-option
                    v-for="(item, index) in this.$config.GOODS_AUDIT_STATUS"
                    :key="Number(index)"
                    :label="item"
                    :value="Number(index)">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="overflow: hidden;">
                <el-form-item label="创建时间:">
                  <DatePickerTime model="datetimerange" :startTime.sync="queryForm.startTime" :endTime.sync="queryForm.endTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核时间:">
                  <DatePickerTime model="datetimerange" :startTime.sync="queryForm.startAuditTime" :endTime.sync="queryForm.endAuditTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="default" @click="loadTableData">查询</el-button>
                <el-button type="default" @click="resetQuery">重置</el-button>
              </el-col>
            </el-row>
            <el-row>

            </el-row>
          </el-form>
        </ToolBar>
      </div>

      <!-- 表格数据 -->
      <div slot="tableGrid">
        <TablePage
          ref="mallGoodsAuditTablePage"
          :customTableHeight="255"
          :loading.sync="loading"
          :table-data="goodsAuditTableDatas"
          :columns="columns"
          @reloadData="loadTableData"
        />
      </div>
    </TreeGridPage>

    <!-- 审核摘要 -->
    <AuditModel
    :visible.sync="auditModelConfig.visible"
    :title="auditModelConfig.title"
    :funType="auditModelConfig.funType"
    :dataId="auditModelConfig.dataId"
    :isNull.sync="auditModelConfig.isNull"
    @callBack="submitAudit"/>
</PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import TreeGridPage from '@/components/TreeGridPage/index.vue'
import TablePage from '@/components/TablePage/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import DatePickerTime from '@/components/DatePickeTime/index.vue'
import AuditModel from './components/auditModel.vue'

import { goodsCatalogTreeList } from '@/api/goods-catalog'
import { goodsAuditPage, goodsAuditPass, goodsAuditReject } from '@/api/goods-audit'
import { merchantsList } from '@/api/merchant'

export default {
  name: 'MallGoodsAuditPage',
  components: {
    PageCard,
    TreeGridPage,
    TablePage,
    ToolBar,
    DatePickerTime,
    AuditModel
  },
  data() {
    return {
      queryForm: null,
      initForm: {
        keyword: null,
        tenantId: void 0,
        catalogId: void 0,
        colorName: null,
        sizeName: null,
        unitName: null,
        auditStatus: void 0,
        startTime: null,
        endTime: null,
        startAuditTime: null,
        endAuditTime: null
      },
      auditModelConfig: {
        title: null,
        visible: false,
        dataId: void 0,
        funType: void 0,
        isNull: true
      },
      goodsCatalogList: [],
      selectCatalog: {
        id: null,
        name: null,
        path: null,
        children: false,
      },
      loading: false,
      goodsAuditTableDatas: [],
      columns: [
        {
          title: "租户名称",
          name: "tenantName",
          fixed: "left",
          width: 150,
          align: "center",
        },
        {
          title: "商品编号",
          name: "goodsNo",
          width: 150,
          align: "center",
        },
        {
          title: "商品名称",
          name: "goodsName",
          width: 150,
          align: "center",
        },
        {
          title: "分类名称",
          name: "catalogName",
          width: 150,
          align: "center",
        },
        {
          title: "商品图片",
          name: "goodsImages",
          width: 150,
          align: "center",
          loadImage: true,
        },
        {
          title: "规格名称",
          name: "standardName",
          width: 150,
          align: "center",
        },
        {
          title: "颜色名称",
          name: "colorName",
          width: 100,
          align: "center",
        },
        {
          title: "尺码名称",
          name: "sizeName",
          width: 100,
          align: "center",
        },
        {
          title: "单位名称",
          name: "unitName",
          width: 100,
          align: "center",
        },
        {
          title: "原价",
          name: "oriPrice",
          width: 100,
          align: "center",
        },
        {
          title: "销售价",
          name: "salePrice",
          width: 100,
          align: "center",
        },
        {
          title: "库存数量",
          name: "stockNumber",
          width: 100,
          align: "center",
        },
        {
          title: "销售数量",
          name: "saleNumber",
          width: 100,
          align: "center",
        },
        {
          title: "规格图片",
          name: "standardImages",
          width: 150,
          align: "center",
          loadImage: true,
        },
        {
          title: "上架状态",
          name: "isSale",
          width: 100,
          select: true,
          align: "center",
          options: this.$config.GOODS_IS_SALE,
          optionsColor: ["#F56C6C", "#1afa29"],
        },
        {
          title: "审核状态",
          name: "auditStatus",
          width: 100,
          select: true,
          fixed: "right",
          align: "center",
          options: this.$config.GOODS_AUDIT_STATUS
        },
        {
          title: '操作',
          name: 'operate',
          fixed: 'right',
          width: 150,
          operate: [{
            name: '通过',
            permission: 'goodsAuditPass',
            confirm: true,
            message: '确定通过该商品的审核吗?',
            fun: this.auditPassModel,
            customStyle: {
              "margin-left": "10px"
            },
            onShow: (row)=> {
              return row.auditStatus === 1
            }
          },{
            name: '驳回',
            permission: 'goodsAuditReject',
            confirm: true,
            message: '确定驳回该商品的审核吗?',
            fun: this.auditRejectModel,
            customStyle: {
              "margin-left": "10px"
            },
            onShow: (row)=> {
              return row.auditStatus === 1
            }
          }]
        }
      ],
      merchantsInfos: [],
      merchantsLoading: false,
    }
  },
  created() {
    this.queryForm = { ...this.initForm }
    this.$nextTick(async ()=> {
      // 货品分类
      await this.loadGoodsCatalog();

      // 加载商户信息
      await this.loadMerchantsInfo();

      // 加载表格数据
      await this.loadTableData();
    })
  },
  methods: {
    async loadTableData() {
      console.log(this.queryForm)
      this.loading = true;
      const { pageNumber, pageSize } = this.$refs.mallGoodsAuditTablePage.page;
      const res = await goodsAuditPage({ pageNumber, pageSize, ...this.queryForm });
      this.$refs.mallGoodsAuditTablePage.page.pageNumber = res.data.pageNumber;
      this.$refs.mallGoodsAuditTablePage.page.pageSize = res.data.pageSize;
      this.$refs.mallGoodsAuditTablePage.page.total = res.data.total;
      this.goodsAuditTableDatas = res.data.rows;
      this.loading = false;
    },

    // 加载货品分类
    async loadGoodsCatalog() {
      const res = await goodsCatalogTreeList();
      this.goodsCatalogList = res.data;
      if (this.$route.query.catalogId && this.goodsCatalogList) {
        const selectCatalogId = this.queryForm.catalogId
        this.goodsCatalogList.forEach((item) => {
          if (item.id === selectCatalogId) {
            this.treeClick(item);
          }
        });
      }
    },

    // 加载合作商信息
    async loadMerchantsInfo(keyword) {
        try{
          this.merchantsLoading = true
          const { data } = await merchantsList({ keyword: keyword })
          this.merchantsInfos = data
          this.merchantsLoading = false
        } catch (e) {
          console.log(e)
          this.merchantsLoading = false
        }
    },

    // 刷新商品分类
    async treeRefresh() {
      await this.loadGoodsCatalog();
      await this.treeClick();
      this.$router.push({ path: "/mall/goods/audit" });
    },

    // 点击商品分类
    async treeClick(e) {
      this.queryForm.catalogId = void 0;
      this.selectCatalog.id = void 0;
      if (e) {
        this.$refs.goodsCatalogTree.setDefaultSelectNode(e.id);
        this.queryForm.catalogId = e.id;
        this.selectCatalog.id = e.id;
        this.selectCatalog.name = e.catalogName;
        this.selectCatalog.path = e.path;
        if (e.children) {
          this.selectCatalog.children = !e.children && e.children.length <= 0;
        } else {
          this.selectCatalog.children = true;
        }
      }
      this.loadTableData();
    },

    // 重置查询
    resetQuery(){
      if (this.queryForm.catalogId) {
        this.$refs.goodsCatalogTree.clearSelectNodde(this.queryForm.catalogId);
      }
      this.queryForm = { ...this.initForm }
      this.loadTableData()
    },

    // 审核通过
    async auditPassModel(row) {
      this.auditModelConfig.visible = true
      this.auditModelConfig.dataId = row.id
      this.auditModelConfig.title = "同意"
      this.auditModelConfig.funType = 1
      this.auditModelConfig.isNull = true
    },

    // 审核通过
    async auditRejectModel(row) {
      this.auditModelConfig.visible = true
      this.auditModelConfig.dataId = row.id
      this.auditModelConfig.title = "驳回"
      this.auditModelConfig.funType = 2
      this.auditModelConfig.isNull = false
    },

    // 提交审核
    async submitAudit(type, dataId, form) {
      console.log(type, dataId, form)
      if(!type || !dataId) return;

      // 审核通过
      if(type === 1) {
        await goodsAuditPass({ id: dataId, remark: form.remark })

      // 审核驳回
      } else if(type === 2) {
        await goodsAuditReject({ id: dataId, remark: form.remark })
      }
      this.loadTableData()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>